<template>
    <div class="manage__page">

      <div class="manage__operate">
        <div>
          <el-button type="danger" plain @click="delete_getway">删除</el-button>
        </div>
      </div>

      <div class="table__data">
        <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection"  width="55" />
        <el-table-column show-overflow-tooltip :align="'center'" :property="col.property" :label="col.label" v-for="col,index in table_column">
          <template #default="scope" v-if="col.property == 'result'">

            <div style="height: 100px;"> 
              <div v-if="scope.row.state==3 && scope.row.result_list[0].file_type=='png'"  style="height: 100%;">
                <el-image
                  style="width: 100%; height: 100%; object-fit: contain"
                  :src="scope.row.result_list[0].path_url"
                  fit="contain"
                  :preview-src-list="[scope.row.result_list[0].path_url]"
                  :preview-teleported="true"
                  :hide-on-click-modal="true"
                  />
              </div>

              <div v-else-if="scope.row.state==3 && scope.row.result_list[0].file_type=='mp4'"  style="height: 100%;">
                <video muted controls :src="scope.row.result_list[0].path_url" style="width: 100%; height: 100%; object-fit: contain;"></video>
              </div>

              <div class="water__items audio__contains" v-else-if="scope.row.state==3 && scope.row.result_list[0].file_type=='mp3'">
                  <audio :src="scope.row.result_list[0].path_url" controls style="width: 100%; object-fit: contain;"></audio>
              </div>

              <div class="water__items" v-else-if="scope.row.state==-1">
                  <div class="fail__box">
                      生成失败！
                  </div>
              </div>

              <div class="water__items" v-else-if="scope.row.state==1">
                  <div class="wait__box">
                      排队中
                  </div>
              </div>

              <div class="water__items" v-else-if="scope.row.state==2">
                  <div class="generate__box">
                      生成中
                  </div>
              </div>

              <div class="water__items" v-else>
                  <div class="unknow__box">
                      未知状态
                  </div>
              </div>
              
            </div>
          </template>

        </el-table-column>

        <el-table-column :align="'center'"  label="操作">
          <template #default="scope" >
            <div>
            <el-button @click="click_record(scope.row)">查看</el-button>
            

            </div>
          </template>
          

        </el-table-column>


      </el-table>
      </div>

      <div class="bottom__page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />  

      </div>


      <RecordDialog
            @cancel="cancel"
            :visible="isVisible"
            :instance="click_instance"
        ></RecordDialog>
    </div>
</template>
           
<script setup>
    import { ref, onMounted } from "vue"
    import { getGenerateTask } from '@/api/manage.js'
    import RecordDialog from './RecordDialog.vue'
    

    const isVisible = ref(false)
    const click_instance = ref({})

    const table_column = ref([
        {'label': 'ID', 'property': 'id'},
        {'label': '菜单', 'property': 'menu_name'},
        {'label': '结果', 'property': 'result'},
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const multipleSelection = ref([])
    
    const tableData = ref([])

    const getDataList = async ()=>{
      
      var req_data = {
        page: currentPage.value,
        page_size: pageSize.value
      }
      var res = await getGenerateTask(req_data)
      // console.log(res)
      tableData.value = res.list
      total.value = res.total
    }

    // 用户勾选数据
    function handleSelectionChange(val) {
        
        multipleSelection.value = val
        // console.log(multipleSelection.value)
    }

    // 改变页面大小
    function handleSizeChange(newSize){
      // console.log(newSize)
      pageSize.value = newSize
      getDataList()
    }

    // 改变页码
    function handleCurrentChange(newPage){
      // console.log(newPage)
      currentPage.value = newPage
      getDataList()
    }

    // 操作数据按钮
    function open_operate(operate_type){

    }

    function click_record(instance){
      isVisible.value = true
      click_instance.value = instance
    }

    function cancel(){
      isVisible.value = false
      
    }

    // 删除数据
    function delete_getway(){

    }

    onMounted(()=>{
      getDataList()
    })
    
</script>
<style scoped lang="scss">

.water__items{

  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manage__page{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
  .manage__operate{
    height: 45px;
    width: 100%;
    position: relative;
    
    div{
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }

  .table__data{
    height: calc(100% - 95px);
    // border-top: 1px solid #ebeef5;
  }

  .bottom__page{
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

        }
}
</style>